<div id="public_adventures_page_div">
  <h1>{{_('public_adventures')}}</h1>

  <!-- Filter form -->
  <div>
    <form id="filterform" hx-trigger="submit" hx-get="/public-adventures/" hx-target="#public_adventures_page_div">
      <div class="flex flex-col items-stretch md:flex-row md:items-center gap-2 justify-around bg-blue-200 shadow-md rounded-lg p-4 mb-4">
        <div class="flex-initial">
          <label for="language_select">{{_('language')}}</label>
        </div>
        <div class="flex-initial">
          <select
            id="language_select"
            name="selected_lang"
            class="dropdown dropdown-green rounded p-2 w-full"
            data-cy="language_select"
            _="on change call (closest <form/>).requestSubmit()"
            >
            {% for lang in available_languages %}
              <option {% if lang == selected_lang %}selected{% endif %} value="{{lang}}">{{lang_to_sym(lang)}}</option>
            {% endfor %}
          </select>
        </div>
        <div class="flex-initial">
          <label for="level_select">{{_('level')}}</label>
        </div>
        <div class="flex-initial">
          <select
            id="level_select"
            name="selected_level"
            class="dropdown dropdown-green rounded p-2 w-full"
            data-cy="level_select"
            data-label="{{_('select_levels')}}"
            _="on change call (closest <form/>).requestSubmit()"
            >
            <option {% if selected_level|string == "" %}selected{% endif %} value="">{{_('all')}}</option>
            {% for level in available_levels %}
              <option {% if selected_level|string == level|string %}selected{% endif %} value="{{level}}">{{ level }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="flex-initial">
          <label for="q">{{_('containing')}}</label>
        </div>
        <div class="flex-1 w-full">
          <input
            type="search"
            id="q"
            name="q"
            class="border text-black border-gray-500 rounded p-2 w-full"
            data-cy="search_adventure"
            value="{{q}}"
            placeholder="{{_('search')}}"
            _="on keyup debounced at 1s call (closest <form/>).requestSubmit()"
            >
        </div>
        <div class="flex-initial">
          <label for="tag_select">{{_('tags')}}</label>
        </div>
        <div class="flex-initial">
          <select
            id="tag_select"
            name="selected_tag"
            class="dropdown dropdown-green rounded p-2 w-full"
            data-cy="tag_select"
            _="on change call (closest <form/>).requestSubmit()"
            >
            <option {% if selected_tag|string == "" %}selected{% endif %} value="">{{_('all')}}</option>
            {% for tag in available_tags %}
              <option {% if selected_tag == tag|string %}selected{% endif %} value="{{tag}}">{{ tag }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="flex-initial">
          <input type="submit" value="{{_('search')}}" class="green-btn">
        </div>
      </div>
    </form>
  </div>

  <div id="search_results">
  </div>

  <div id="_body">
    {% if adventures|length == 0 %}
      <div class="grid p-5 text-center bg-white shadow-md rounded-lg transition-shadow hover:shadow-lg outline-blue-400 hover:outline hover:outline-2">
        {{_('no_adventures_yet')}}
        <button id="create_adventure_button" class="green-btn mt-4"
          _="on click window.open('/for-teachers/customize-adventure', '_self')"
          data-cy="edit_link"
          {% if second_teacher and role == 'viewer' %}disabled{% endif %}
          >{{_('create_adventure')}}</button>
      </div>
    {% else %}
      {% include "public-adventures/incl-adventure-list.html" %}
    {% endif %}
  </div>
</div>
